<!DOCTYPE HTML>

<script type="text/javascript">

var x = 100;
var y = 312;
var x2 = 80;
var y2 = 60;
var cont = 0;

var x3 = 1000;
var y3 = 312;
var x4 = 80;
var y4 = 60;

var i=2;
var im=1;
var ini;

var sli=1;



window.onload = function(){
	dibujar(x,y,x2,y2); 
	click();
	};

function dibujar(x,y,x2,y2){
	canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");
		
	var imagen = new Image();
	imagen.src = "atras.gif";
	imagen.onload = function(){
   		ctx.drawImage(imagen, 160, 292);
	} 
	var imagen2 = new Image();
	imagen2.src = "siguiente2.gif";
	imagen2.onload = function(){
   		ctx.drawImage(imagen2, 1000, 292);
	} 
	var imagen4 = new Image();
	imagen4.src = "slide2.png";
	imagen4.onload = function(){
   		ctx.drawImage(imagen4, 350, 370);
	}
	
	imagen1(); 
	
	
}

function click(){
  //Añadimos un addEventListener al canvas, para reconocer el click
  canvas.addEventListener("click",			
	//Una vez se haya clickado se activará la siguiente función
	function(e){
		//Boton izquierdo
		if(e.clientX-canvas.offsetLeft > 160 && e.clientX-canvas.offsetLeft < 212)
		{		
				if(e.clientY-canvas.offsetTop > 292 && e.clientY-canvas.offsetTop < 378)
				{		
					i--;
					imagen1();
				}	
		}
		
		//Boton derecho
		if(e.clientX-canvas.offsetLeft > 1000 && e.clientX-canvas.offsetLeft < 1052)
		{		
				if(e.clientY-canvas.offsetTop > 292 && e.clientY-canvas.offsetTop < 378)
				{		
					i++;
					imagen1();
				}	
		}
		
		//slideshow
		if(e.clientX-canvas.offsetLeft > 562 && e.clientX-canvas.offsetLeft < 642)
		{		
				if(e.clientY-canvas.offsetTop > 598 && e.clientY-canvas.offsetTop < 649)
				{	
					sli=0;	
					slide();
					
				}	
		}
		
		//tanca slideshow
		if(e.clientX-canvas.offsetLeft > 820 && e.clientX-canvas.offsetLeft < 916)
		{		
				if(e.clientY-canvas.offsetTop > 570 && e.clientY-canvas.offsetTop < 617)
				{
					sli=1;
					ctx.fillStyle = "black";
					ctx.fillRect(0, 0, 1190, 680);
					dibujar();
				}	
		}
		
	}
	,false);}
	
function imagen1(){
	var imagenes = new Array(4);
	imagenes[0]= new Image();
	imagenes[0].src= 'DALI2.jpg';
	imagenes[1]= new Image();
	imagenes[1].src= 'miro.jpg';
	imagenes[2]= new Image();
	imagenes[2].src= 'picasso22.jpg';

	if(i==3){
		i=0;
	}
	else if(i==-1){
		i=2;
	}	

	imagenes[i].onload = function(){
   		ctx.drawImage(imagenes[i], 280, 110);
	}
}

function limpiar(){
	ctx.fillStyle = "black";
	ctx.fillRect(220, 0, 700, 300);
}

function slide() {
	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, 1190, 680);
	
	var imagen5 = new Image();
	imagen5.src = "tanca.png";
	imagen5.onload = function(){
   		ctx.drawImage(imagen5, 820, 570);
	}
	im=1;
	ini=setInterval (fotos, 3000);
	
}

function fotos(){
	if(i==0){
		i=1;
	}
	else if (i==1){
		i=2;
	}
	else if (i==2){
		i=0;
	}
	if(sli==0){	
		imagen1();	
	}
}

</script>



<html>
<title></title>


<body bgcolor="black">

<canvas id="canvas" height="680px" width="1190px">
	Su navegador no soporta Canvas!
</canvas>
</body>
</html>

